<template>
    <div class="tabbar_item" @click="btnClick">
        <div v-if="!isActive"><slot name="img1"></slot></div>
        <div v-else><slot name="img2"></slot></div>
        <div :style="activeStyle"><slot name="text"></slot></div>
    </div>
</template>
<script>
export default({
   name:'TabBarItem',
   props:{
       path:String,
       acticeColor:{
           type:String,
           default:'red'
       }
   },
   data(){
       return{
        
           
       }
   },
   computed:{
       isActive(){
               return this.$route.path.indexOf(this.path) !==-1  
       },
      activeStyle(){
          return this.isActive?{color:this.acticeColor}:{}
      }
       
   },
   methods:{
    btnClick(){
        // console.log(this.path);
        this.$router.replace(this.path);
        
    }
   }
})
</script>

<style lang='scss'>
    .tabbar_item{
        flex: 1;
        text-align:center;
        height: 49px;
        padding-top: 1px;
        font-size: 14px;
        img{
        width: 24px;
        height: 24px;
        margin-top: 3px;
        margin-bottom: 2px;
        vertical-align:middle;
        }
    }
    
  

    /* .active{
        color: aqua;
    } */
    
</style>
